<!-- 页面 -->
<template>
    <div>
        <van-nav-bar title="特色课">
            <template #right>
                <van-icon name="search" size="18" />
            </template>
        </van-nav-bar>
        <van-dropdown-menu>
            <van-dropdown-item title="分类" ref="item">
                <div style="padding: 5px 16px; width: 40%; float: left;">
                    <van-button plain block type="primary">重置</van-button>
                </div>
                <div style="padding: 5px 16px; width: 40%; float: right;">
                    <van-button color="#eb6100" type="danger" block>
                        确认
                    </van-button>
                </div>
            </van-dropdown-item>
            <van-dropdown-item title="排序" ref="item">
                <van-cell center title="综合排序" @click="pai()" style="text-align: center; font-size: 20px;" />
                <van-cell center title="最新" @click="pai(1)" style="text-align: center; font-size: 20px;" />
                <van-cell center title="最热" @click="pai(2)" style="text-align: center; font-size: 20px;" />
                <van-cell center title="价格从低到高" @click="pai(3)" style="text-align: center; font-size: 20px;" />
                <van-cell center title="价格从高到低" @click="pai(4)" style="text-align: center; font-size: 20px;" />
            </van-dropdown-item>
            <van-dropdown-item title="筛选" ref="item">
                <van-grid>
                    <van-grid-item v-for="(item, index) in list" :key="index" :class="xuan == index ? 'red' : ''"
                        @click="aa(index, item.course_type)">{{ index | asas }}</van-grid-item>
                </van-grid>

            </van-dropdown-item>
        </van-dropdown-menu>

        <van-card v-for="(item, index) in list1" :key="index" @click="add(item)">
            <template #tags>
                <div>
                    <p style="font-size: 20px;">{{ item.title }}</p>
                    <p>1970-01-20 03:60:00|共{{ item.sales_num }}课时</p>
                    <van-icon name="phone" /> {{ item.teachers_list[0].teacher_name }}
                </div>
                {{ item.browse_num }}人已报名
            </template>
            <template #footer>
                <span style="color: green;">{{ item.price | asas1 }}</span>
            </template>
        </van-card>
        <xia co="1"></xia>
    </div>
</template>
<!-- vue -->
<script>
import xia from '@/components/xia.vue';
export default {
    components: {
        xia,
    },
    data() {
        return {
            // 声明的属性
            xuan: 0,
            list: [],
            list1: [],
        }
    },
    //生命周期函数
    mounted() {
        this.$axios.get('http://120.53.31.103:84/api/app/courseBasis').then(res => {
            this.list = res.data.data.list
            this.list1 = this.list
        })
    },
    // 调用方法
    methods: {
        pai(by) {
            this.$axios.get('http://120.53.31.103:84/api/app/courseBasis?order_by=' + by).then(res => {
                this.list1 = res.data.data.list
                console.log(res);
            })
        },
        aa(va, typ) {
            this.xuan = va
            this.$axios.get('http://120.53.31.103:84/api/app/courseBasis?course_type=' + typ).then(res => {
                this.list1 = res.data.data.list
                console.log(res);
            })
        },
        add(item) {
            console.log(item);
            this.$router.push('/kexi')
            localStorage.setItem('item', JSON.stringify(item))
        }
    },
    // 监听器
    watch: {
    },
    // 计算属性
    computed: {
    },
    // 过滤器
    filters: {
        asas1(value) {
            if (value == 0) {
                return '免费'
            }
            return value
        },
        asas(value) {
            var zxc = ''
            if (value == 0) {
                zxc = '全部'
            } else if (value == 1) {
                zxc = '大班课'
            } else if (value == 2) {
                zxc = '小班课'
            } else if (value == 3) {
                zxc = '公开课'
            } else if (value == 4) {
                zxc = '点播课'
            } else if (value == 5) {
                zxc = '面授课'
            } else if (value == 6) {
                zxc = '音频课'
            } else if (value == 7) {
                zxc = '系统课'
            } else if (value == 8) {
                zxc = '图文课'
            } else if (value == 9) {
                zxc = '会员课'
            }
            return zxc
        }
    },
    // 自定义指令
    directives: {
    }
}
</script>
<!-- css样式 -->
<style>
.buo {
    width: 100%;
    height: 50px;
    margin-top: 30px;
}

.kebu1 {
    width: 50%;
    float: left;
}

.kebu2 {
    width: 50%;
    float: right;
}

.red {
    color: red !important;
}
</style>